<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app" style="width: 100%; height: 100%;">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
  <script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../js/vue.min.js"></script>
  <script type="text/javascript" src="../../../elementUI/index.js"></script>
  <script type="text/javascript" src="../../../js/utils.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script src="js/wodry.min.js"></script>
  <script src="js/fontscroll.js"></script>
  <!-- <script src="js/echarts.js"></script> -->
  <script src="js/china.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
        }
      },
      mounted() {
        let _this = this
        let myChart = echarts.init(document.getElementById('main'));
        // myChart.showLoading();
        $.ajax({
          url: DomainName + '/GoodsFileAdd',
          type: 'POST',
          data: {
            token: $.cookie("token")
          },
          success: function (res) {
            console.log(res)
            let data = {
              name: 'panghu',
              children: [{
                name: '熊大',
                children: [{
                  name: '熊二',
                  children: [{
                    name: '熊三',
                    children: [{
                      name: '熊二',
                    }]
                  }]
                }]
              }],
            }
            myChart.setOption(
              (option = {
                tooltip: {
                  trigger: 'item',
                  triggerOn: 'mousemove'
                },
                series: [
                  {
                    type: 'tree',
                    data: [data],
                    top: '1%',
                    left: '15%',
                    bottom: '1%',
                    right: '7%',
                    symbolSize: 7,
                    orient: 'RL',
                    label: {
                      position: 'right',
                      verticalAlign: 'middle',
                      align: 'left'
                    },
                    leaves: {
                      label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right'
                      }
                    },
                    emphasis: {
                      focus: 'descendant'
                    },
                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                  }
                ]
              })
            );
          },
          error: function () {
            _this.$message.error("操作失败，请稍后再试")
          },
          complete: function (XMLHttpRequest) {
            _this.loading = false
            if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
              window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
            }
          }
        })

      }
    })

  </script>

</body>

</html>